<template>
	<view class="promotion-container">
		<view class="" v-show="!loading">
			<view class="promotion-header">
				<view class="promotion-header-bg"></view>
				<view class="promotion-header-info">
					<image :src="promotionData.posterUrl"  style="width: 100%;height: 300rpx;border-radius: 20rpx;"></image>
					<view class="promotion-header-info-list u-m-t-15" >
						<view class="promotion-header-info-item">
							<text class="header-info-item-lt">活动方</text>
							<text class="header-info-item-rt u-line-1">{{promotionData.shopName}}</text>
						</view>
						<view class="promotion-header-info-item">
							<text class="header-info-item-lt">活动时间</text>
							<text
								class="header-info-item-rt">{{$mHelper.parseTime(promotionData.startTime,'{y}-{m}-{d}')+'至'+$mHelper.parseTime(promotionData.endTime,'{y}-{m}-{d}')}}</text>
						</view>
						<view class="promotion-header-info-item">
							<text class="header-info-item-lt">参与条件</text>
							<text class="header-info-item-rt">
								<text
									v-if="(promotionData.promotionConditions&1)!=0">订单金额满{{promotionData.totalAmount}}元<br /></text>
								<text
									v-if="(promotionData.promotionConditions&2)!=0&&promotionData.isPackage">订单需包含所有套餐商品</text>
								<text
									v-if="(promotionData.promotionConditions&2)!=0&&!promotionData.isPackage">订单需包含某一项套餐商品</text>
							</text>
						</view>
						<view class="promotion-header-info-item">
							<text class="header-info-item-lt">参与次数</text>
							<text class="header-info-item-rt" v-if="promotionData.maximumResultCount!=0&&promotionData.maximumResultCount">
								{{promotionData.usedCount+'/'+promotionData.maximumResultCount}}
								<text class="u-m-l-20" style="color: #FF551A;" @click="openUseHistoryFn">查看详情  <u-icon name="arrow-right" color="#ff551a"></u-icon> </text>
							</text>
							<text class="header-info-item-rt" v-else>无限制</text>
						</view>
					</view>

				</view>
			</view>
			<view class="promotion-section">
				<view class="activity-gift" v-if="(promotionData.promotionResult&1)!=0&&promotionData.salesPromotionResultItems.length!=0">
					<view class="activity-title">
						<image src="/static/order/zengpin.png" alt="" class="activity-title-mark"></image>
						<text class="activity-title-text">赠品</text>
						<text style="color:#999;">（下单后自动加购）</text>
					</view>
					<view class="activity-gift-container">
						<view class="activity-gift-list" v-for="item in promotionData.salesPromotionResultItems"
							:key="item.id">
							<image :src="item.url" alt="" class="activity-gift-image"></image>
							<view class="activity-gift-info">
								<view class="activity-gift-name">{{item.name}} </view>
								<view class="activity-gift-count">x{{item.quantity}}</view>
							</view>

						</view>
					</view>
				</view>

				<view class="activity-reduce" v-if="(promotionData.promotionResult&2)!=0">
					<view class="activity-title">
						<image src="/static/order/lijian.png" alt="" class="activity-title-mark"></image>
						<text class="activity-title-text">减钱</text>
						<text style="color:#999;">（下单时自动生效）</text>
					</view>
					<view class="activity-list">
						<view class="activity-list-lt">
							减<text class="activity-list-lt-text">{{promotionData.reduceMoney}}</text>元
						</view>
						<view class="activity-list-rt">
							参与活动立享折扣优惠
						</view>
					</view>
				</view>

				<view class="activity-discount" v-if="(promotionData.promotionResult&4)!=0">
					<view class="activity-title">
						<image src="/static/order/zhekou.png" alt="" class="activity-title-mark"></image>
						<text class="activity-title-text">打折</text>
						<text style="color:#999;">（下单时自动生效）</text>
					</view>
					<view class="activity-list">
						<view class="activity-list-lt">
							<text class="activity-list-lt-text">{{(promotionData.discount)/10}}</text>折
						</view>
						<view class="activity-list-rt">
							参与活动立享折扣优惠
						</view>
					</view>
				</view>
				<!-- 送券 -->
				<view class="activity-coupon" v-if="(promotionData.promotionResult&8)!=0">
					<view class="activity-title">
						<image src="/static/order/youhuiquan.png" alt="" class="activity-title-mark"></image>
						<text class="activity-title-text">赠券</text>
						<text style="color:#999;">（订单完成后赠送至优惠券）</text>
					</view>
					<view class="activity-coupon-container">
						<view class="activity-coupon-list">
							<view class="activity-coupon-list-info">
								<view class="coupon-info-lt">
									<view>
										<view class="coupon-info-lt-title" style="color:#FF0000;">
											<text class="coupon-info-lt-bold"
												style="font-size:20px;font-weight:bold;color: #FF551A;">200</text>元
										</view>
										<view class="coupon-info-lt-text">
											满300可用
										</view>
									</view>

								</view>
								<view class="coupon-info-rt">
									<view>
										<view class="coupon-info-lt-title">
											全场通用
										</view>
										<view class="coupon-info-lt-text">
											全场均可使用
										</view>
									</view>

								</view>
							</view>
							<view class="activity-coupon-list-text">
								有效期至2022.01.26
							</view>
						</view>
					</view>
				</view>
				<!-- 送红包 -->
				<view class="activity-hongbao" v-if="(promotionData.promotionResult&16)!=0">
					<view class="activity-title">
						<image src="/static/order/zhanghuyue.png" alt="" class="activity-title-mark"></image>
						<text class="activity-title-text">赠红包</text>
						<text style="color:#999;">（订单完成后赠送至账户余额）</text>
					</view>
					<view class="activity-list">
						<view class="activity-list-lt">
							<text class="activity-list-lt-text">200</text>元
						</view>
						<view class="activity-list-rt">
							任意条件均可使用
						</view>
					</view>
				</view>

				<view class="condition-product" v-if="(promotionData.promotionConditions&2)!=0">
					<view class="activity-title">
						<text class="activity-title-text">套餐详情</text>
					</view>
					<view class="condition-product-title"
						style="display: flex;align-items: center;margin-bottom: 30rpx;">
						<image src="/static/order/danger.png" alt=""
							style="width: 40rpx;height: 40rpx;margin-right: 10rpx;"></image>
						<text class="activity-title-text" style="font-size: 12px;color: #FF551A;"
							v-if="promotionData.isPackage">活动套餐包含以下商品，购买全部即可参与活动</text>
						<text class="activity-title-text" style="font-size: 12px;color: #FF551A;"
							v-if="!promotionData.isPackage">活动套餐包含以下商品，购买一项即可参与活动</text>
					</view>
					<!-- 列表 -->
					<lazy-list ref="childWaterfall" :flowList="flowList" :loadStatus="loadStatus" :isActive="true" />
				</view>
				<view style="padding: 100rpx 0; 60rpx;box-sizing: border-box;" v-if="flowList.length!=0">
					<button type="default" style="background: linear-gradient(-90deg, #FFBB1A, #FFBB1A);
					border-radius: 45rpx;font-size: 14px;" @click="addShopingCart">一键加入购物车</button>
				</view>
				<u-toast ref="uToast" />			
			</view>
		</view>
		<u-popup v-model="useHistoryShow" safe-area-inset-bottom	:closeable="true"  mode="bottom" length="60%">
			<view style="height: 100%;flex-direction: column;" class="u-flex">
				<view class="u-text-center u-p-t-30 u-p-b-30">参与详情</view>
				<view style="flex:1;width: 100%;">
					<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="true">
						<view class="u-p-t-20 u-p-b-20 u-flex"  slot="top"  style="border-top: 1px solid #EAEAEA;border-bottom: 1px solid #EAEAEA;">
							<view class="u-flex-2 u-text-center" style="color: #999;">订单</view>
							<view class="u-flex-1 u-text-center" style="color: #999;">享受次数</view>
						</view>
						<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
						<view class="promition-item u-flex" v-for="(item,index) in dataList" :key="index" >
							<view class="u-flex-2 u-p-l-35">
								<view class="u-font-30" style="font-weight: 500;" @click="jumpOrderFn(item.tradeId,item.promotionId)">{{item.tradeNo}} <u-icon name="arrow-right"></u-icon>  </view>
								<view class="u-font-26" style="color: #999;">{{$fui.dateFormatter(item.createdTime, 'y-m-d h:i')}}</view>
							</view>
							<view class="u-flex-1 u-text-center">{{item.resultCount}}</view>
						</view>
					</z-paging>
				</view>
				
			</view>
		</u-popup>
		<akLoading :active="loading" ></akLoading>
	</view>
</template>

<script>
	import LazyList from '../lazyList.vue';
	import { useShopStore } from '@/store/shop.js';
	import { useUserStore } from '@/store/user.js';
	
	import { mapState } from 'pinia';
	export default {
		components: {
			LazyList
		},
		data() {
			return {
				id: null,
				name: '活动',
				loadStatus: 'nomore',
				params: {
					pageIndex: 1,
					PageSize: 10
				},
				flowList: [],
				dataList:[],
				loading: true,
				promotionData: {},
				useHistoryShow:false,
			}
		},
		// onLoad(options) {
		// 	this.id = options.id
		// 	// this.name = options.name
		// 	// 获取详情商品列表
		// 	this.getPromotionDetail()
		// },
		props: {
			promotionId: {
				type: String,
				default: ''
			}
		},
		created() {
			this.getPromotionDetail()
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'}),
			...mapState(useUserStore, ['isPurchase'])
		},
		methods: {
			jumpOrderFn(id,activityId){
				this.$mRouter.push({ route: '/pages/purchase/order/xiangqing?id=' + id+'&activityId='+activityId })
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
					BuyerId:this.storeShop.id,
					// IsSeller:true
					promotionId:this.promotionId
				}
				const res = await this.$newHttp.get('api/v1.2/SalesPromotion/GetTradeUsePromotionsPage', { params: params } );
				if(res.code === 200){
					this.$refs.paging.complete(res.data.list);
				}else{
					this.$refs.paging.complete(false);
				}
			},
			async openUseHistoryFn(){
				this.useHistoryShow = true;
			},
			// 获取活动详情
			async getPromotionDetail() {
				this.loading = true;
				let params = {
					id: this.promotionId,
					buyerId: this.storeShop.id
				}
				try {
					const res = await this.$newHttp.get('api/v1.2/SalesPromotion/GetSalesPromotionById', {
						params
					});
					console.log(res);
					this.loading = false;
					if (res.code === 200) {
						this.promotionData = res.data;
						this.flowList = res.data.salesPromotionConditionItems
					}
				} catch (e) {
					//TODO handle the exception
					this.loading = false;
				}
			},
			// 添加购物车
			async addShopingCart() {
				if (!this.isPurchase) {
					return this.$u.toast('该账号没有添加购物车的权限');
				}
				this.loading = true;
				let params = {
					promotionId:this.promotionId,
					buyerId:this.storeShop.id
				}
				try {
					const res = await this.$newHttp.post('api/SalesPromotion/AddPromotionItemsToShoppingCart', 
						params
					);
					this.loading = false;
					if (res.code === 200) {
						this.$refs.uToast.show({
							title: '加入购物车成功',
							type: 'success',
							duration: '2300',
							position:"bottom"
						})
						// this.promotionData = res.data;
						// this.flowList = res.data.salesPromotionConditionItems
					}else{
						this.$u.toast('加入购物车失败，错误信息：'+res.erroMessage);
					}
				} catch (e) {
					//TODO handle the exception
					this.loading = false;
					this.$u.toast('加入购物车失败，错误信息：'+e);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.promotion-container {
		min-height: calc(100vh - 44px);
		position: relative;
	}

	.promotion-header {
		width: 100%;
		position: relative;
		// height: 300rpx;
		.promotion-header-bg {
			width: 100%;
			height: 120rpx;
			background-color: #FFBB1A;
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
		}

		.promotion-header-info {
			width: 100%;
			box-sizing: border-box;
			padding: 0 36rpx;
			// position: absolute;
			// top: 40rpx;
			transform: translateY(-60rpx);
			.promotion-header-info-list {
				background-color: #fff;
				box-sizing: border-box;
				padding: 34rpx 30rpx;
				border-radius: 16rpx;

				.promotion-header-info-item {
					margin-bottom: 10rpx;
					display: flex;

					.header-info-item-lt {
						width: 140rpx;
						display: inline-block;
						color: #666666;
					}

					.header-info-item-rt {
						flex: 1;
						display: inline-block;
					}
				}
			}
		}
	}

	.promotion-section {
		width: 100%;
		box-sizing: border-box;
		padding: 0 36rpx;

		.activity-title {
			display: flex;
			align-items: center;
			margin: 30rpx 0;

			.activity-title-mark {
				height: 50rpx;
				width: 60rpx;
				margin-right: 10rpx;
			}

			.activity-title-text {
				font-weight: bold;
				// color: #FE0000;
			}
		}

		.activity-list {
			width: 100%;
			padding: 14px 20px;
			// border: 1px dashed #ccc;
			border-radius: 10px;
			display: flex;
			align-items: center;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 9px 1px rgba(8, 1, 3, 0.04);

			>p {
				margin: 0;
			}

			.activity-list-lt {
				width: 90px;
				color: #FF551A;

				.activity-list-lt-text {
					font-weight: bold;
					color: #FF551A;
					font-size: 20px;
				}

			}
		}

		.activity-gift {
			.activity-gift-container {
				background: #FFFFFF;
				box-shadow: 0px 0px 9px 1px rgba(8, 1, 3, 0.04);
				border-radius: 16rpx;
				box-sizing: border-box;
				padding: 30rpx;

				.activity-gift-list {
					display: flex;
					margin-bottom: 10rpx;
					box-sizing: border-box;

					.activity-gift-image {
						width: 110rpx !important;
						height: 110rpx;
						border-radius: 14rpx;
					}

					.activity-gift-info {
						flex: 1;
						width: 74%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						margin-left: 20rpx;

						.activity-gift-name {
							margin: 10rpx 0 0;
							// width: 80%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}

						.activity-gift-count {
							margin: 0;
						}
					}
				}
			}
		}

		.activity-coupon {
			.activity-coupon-container {
				width: 100%;
				box-sizing: border-box;
				background: url('/static/order/conponBg.png') 0 0 no-repeat;
				background-size: 100% 100%;
				box-shadow: 0px 0px 9px 1px rgba(8, 1, 3, 0.04);

				.activity-coupon-list {

					// border: 1px solid #eee;
					.activity-coupon-list-info {
						display: flex;
						box-sizing: border-box;

						.coupon-info-lt {
							display: flex;
							align-items: center;
							// @include _justify(center);
							box-sizing: border-box;
							padding: 10px 0;
							padding-left: 16px;

							width: 110px;
							// border-right: 1px solid #eee;

							p {
								text-align: center;
								margin: 5px 0;
							}
						}

						.coupon-info-rt {
							display: flex;
							align-items: center;
							// @include _justify(center);
							box-sizing: border-box;
							padding-left: 16px;

							p {
								margin: 5px 0;
							}
						}

					}

					.activity-coupon-list-text {
						border-top: 1px solid #eee;
						text-align: right;
						font-size: 12px;
						color: #999;
						box-sizing: border-box;
						padding: 4px 14px 4px 0px;
					}
				}
			}
		}
	}
	
	.loading-container {
		position: relative;
		height: 100%;
		width: 100%;
	}
	.promition-item{
		box-sizing: border-box;
		padding: 28rpx 0rpx;
		background-color: #F8F8F8;
		border-bottom: 1px solid #eaeaea;
	}
</style>
